<template>
    <div class="informationItm">
        <div class="box_1"><img :src="itemData.small_img" alt="" /></div>
        <div class="box_2">
            <p class="p1">{{ itemData.name }}</p>
            <p class="p2">{{ itemData.rule }}</p>
        </div>
        <div class="box_3">x{{ itemData.count }}</div>
        <div class="box_4">
            ￥<span>{{ itemData.price }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "InformationItm",
    props: {
        // 接收 商品数据
        itemData: {
            type: Object,
            default() {
                return {};
            }
        },
    },
}
</script>

<style lang="less" scoped>
.informationItm {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 17px;

    .box_1 {
        width: 62px;
        img {
            display: block;
            border-radius: 5px;
        }
    }
    .box_2 {
        width: 140px;
        margin-left: 10px;
        align-self: flex-start;
        p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }
        .p1 {
            letter-spacing: 1px;
            margin-top: 7px;
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .p2 {
            color: #999;
        }
    }
    .box_3 {
        color: #999;
    }
    .box_4 {
        margin-left: auto;
    }
}
</style>